@import '../../mixins'
@import '../../base'

@import './vars'
@import './animations'

@import './btn'
@import './scroll-box'
@import './context-menu'
@import './bookmarks-editor'

@import './tabs'
@import './tabs.tab'

@import './pinned-dock'
@import './pinned-tab'

@import './bookmarks'
@import './bookmarks.separator'
@import './bookmarks.folder'
@import './bookmarks.bookmark'

@import './input.text'
@import './input.window-select'

@import './confirm'
@import './notifications'
@import './navigation-bar'

// ---
// -- Root vue element
// -
.root
  box(relative)
  size(100%, 100%)
  background-color: var(--bg)
  background-image: var(--bg-img)
  background-size: var(--bg-size)

// ---
// -- Sidebar root element
// -
.Sidebar
  box(relative, flex)
  size(100%, same)
  flex-direction: column
  overflow: hidden

#root[data-pinned-tabs-position="top"] > .Sidebar
  flex-direction: column
#root[data-pinned-tabs-position="left"] > .Sidebar
  flex-direction: row
#root[data-pinned-tabs-position="right"] > .Sidebar
  flex-direction: row-reverse

.Sidebar > .PinnedDock
  z-index: 2001

// ---
// -- Main container
// -
.Sidebar > .box
  box(relative, flex)
  size(100%, same)

#root[data-nav-layout="horizontal"] .Sidebar > .box
#root[data-nav-layout="hidden"] .Sidebar > .box
  flex-direction: column
#root[data-nav-layout="vertical"] .Sidebar > .box
  flex-direction: row

// ---
// -- Dimmer layer
// -
.Sidebar .dimmer
  box(absolute)
  pos(0, 0)
  size(100%, same)
  background-color: #00000064
  z-index: -1
  opacity: 0
  transition: z-index var(--d-fast), opacity var(--d-fast)

.Sidebar[data-hidden-panels-bar] .dimmer
  z-index: 500
  opacity: 1

// ---
// -- SelectFolderBar
// -
.SelectBookmarksFolderBar
  box(relative)
  size(100%)
  background-color: var(--bg)
  background-image: var(--bg-img)
  background-size: var(--bg-size)
  box-shadow: 0 0 0 1px var(--border-fg),
              inset 0 1px 0 0 var(--border-flare-fg),
              0 0 16px 0 #00000032

.SelectBookmarksFolderBar h2
  box(relative)
  text(s: rem(21), w: 700)
  color: var(--title-fg)
  margin: 16px 0 12px
  padding: 0
  text-align: center

.SelectBookmarksFolderBar .folder-title
  box(relative)
  text(s: rem(16))
  color: var(--active-fg)
  padding: 0 8px
  text-align: center
  &[data-wrong]
    animation: shake-animation .3s, err-blink-animation .6s

.SelectBookmarksFolderBar .ctrls
  box(relative, flex)
  align-items: center
  justify-content: center
  padding: 0 8px 6px
  margin: 12px 0 0
  flex-wrap: wrap

.SelectBookmarksFolderBar .ctrls > .btn
  size(min-w: max-content)
  text(s: rem(15))
  padding: 5px 12px
  margin: 4px
  flex-grow: 1

// ---
// -- Move pointer
// -
.Sidebar .pointer
  box(absolute)
  size(32px, 24px)
  pos(0, 0)
  z-index: -1
  opacity: 0
  transform: translateY(-100%)
  &:after
    content: ''
    box(absolute)
    size(100vw, 2px)
    pos(11px, 0)
    background-color: var(--nav-btn-update-badge-bg)
    opacity: 0
  &:before
    content: ''
    box(absolute)
    size(0, 0)
    pos(8px, 0)
    border-left: 4px solid var(--nav-btn-update-badge-bg)
    border-right: 4px solid #00000000
    border-top: 4px solid #00000000
    border-bottom: 4px solid #00000000

.Sidebar[data-drag] .pointer
  opacity: 1
  z-index: 100

.Sidebar[data-pointer="between"] .pointer:after
  opacity: 1

.Sidebar[data-pointer="none"] .pointer:before
.Sidebar[data-pointer="inside"] .pointer:after
.Sidebar[data-pointer="inside"] .pointer:before
  transform: translateX(100%)
  opacity: 0

for i in 1..12
  .Sidebar[data-pointer="between"] .pointer[data-lvl=\"{i}\"]:before
  .Sidebar[data-pointer="between"] .pointer[data-lvl=\"{i}\"]:after
    transform: "translateX(calc(var(--tabs-indent) * %s))" % i

  .Sidebar[data-pointer="between"][data-panel-type="bookmarks"] .pointer[data-lvl=\"{i}\"]:before
  .Sidebar[data-pointer="between"][data-panel-type="bookmarks"] .pointer[data-lvl=\"{i}\"]:after
    transform: "translateX(calc(var(--bookmarks-indent) * %s))" % i

#root[data-pinned-tabs-position="left"] .Sidebar .pointer
  left: var(--tabs-pinned-width)
#root[data-nav-layout="vertical"] .Sidebar .pointer
  left: var(--nav-btn-width)

// ---
// -- Arrow of drag pointer
// -
.Sidebar .arrow
  box(absolute)
  size(100%, same)
  pos(0, 0)
  opacity: 1
  &:before
    content: ''
    box(absolute)
    size(16px, 16px)
    pos(4px, -11px)
    transform: rotateZ(45deg)
    box-shadow: inset 0 0 0 2px var(--nav-btn-update-badge-bg)
    transition: background-color var(--d-fast)
  &:after
    content: ''
    box(absolute)
    size(16px, 16px)
    pos(4px, -11px)
    opacity: 1
    transform: rotateZ(45deg)
    box-shadow: inset -1px 1px 0 0 var(--nav-btn-update-badge-bg)

.Sidebar[data-pointer="none"] .arrow
  opacity: 0

.Sidebar .arrow[data-expanding]
  animation: pointer-expand-arrow .3s

.Sidebar .arrow[data-expanding]:after
  animation: pointer-expand-pulse .5s

// ---
// -- Container of panels
// -
.Sidebar .panel-box
  box(relative)
  flex-grow: 2

// ---
// -- Panel
// -
.Sidebar .panel
  box(absolute, flex)
  pos(0, 0)
  size(100%, same)
  flex-direction: column
  transition: transform var(--d-fast), opacity var(--d-fast), z-index var(--d-fast)
  opacity: 0
  z-index: 0
  &[data-pos="center"]
    z-index: 10
    opacity: 1
    transform: translateX(0)
  &[data-pos="left"]
    transform: translateX(-100%)
  &[data-pos="right"]
    transform: translateX(100%)

// ---
// -- Hidden panels bar
// -
.HiddenPanelsBar
  box(absolute, flex)
  pos(0, 0)
  z-index: 1000
  box-shadow: 0 1px 12px 0 #00000056,
              0 0 0 1px var(--border-fg),
              inset 0 1px 0 0 var(--border-flare-fg)
  background-color: var(--bg)
  background-image: var(--bg-img)
  background-size: var(--bg-size)
  flex-flow: wrap
#root[data-nav-layout="horizontal"] .HiddenPanelsBar
#root[data-nav-layout="hidden"] .HiddenPanelsBar
  size(100%, max-h: calc(100% - 64px))
#root[data-nav-layout="vertical"] .HiddenPanelsBar
  size(h: 100%)
  flex-direction: column

.HiddenPanelsBar .hidden-panel
  box(relative, flex)
  size(h: 30px, min-w: 30px)
  flex: 1
  cursor: pointer
  > svg
  > img
    box(absolute)
    pos(calc(50% - 8px), same)
    size(16px, same)
    fill: var(--container-fg)
  > .name
    display: none
  &:hover
    background-color: #00000032
  &:active
    opacity: .7
  &[data-active]
    background-color: #00000032
#root[data-nav-layout="horizontal"] .HiddenPanelsBar .hidden-panel
#root[data-nav-layout="hidden"] .HiddenPanelsBar .hidden-panel
  padding: 1px 0 0
#root[data-nav-layout="vertical"] .HiddenPanelsBar .hidden-panel
  size(30px, max-h: 32px)
  padding: 0 0 0 1px

#root[data-style="light"] .HiddenPanelsBar .hidden-panel[data-color] > svg
  fill: var(--nav-btn-fg) !important
  filter: drop-shadow(1px 0 0 var(--container-fg)) drop-shadow(-1px 0 0 var(--container-fg)) drop-shadow(0 -1px 0 var(--container-fg)) drop-shadow(0 1px 0 var(--container-fg))

// ---
// -- Transitions
// -
.Sidebar
  .panel-enter-active
  .panel-leave-active
    transition: z-index var(--d-fast), transform var(--d-fast)
  .panel-enter
    transform: translateX(100%)
    z-index: 0
  .panel-enter-to
    transform: translateX(0)
    opacity: 1
    z-index: 10
  .panel-leave
    transform: translateX(0)
    opacity: 1
    z-index: 10
  .panel-leave-to
    transform: translateX(100%)
    z-index: 0

#root[data-nav-layout="horizontal"]
#root[data-nav-layout="hidden"]
  .hidden-panels-bar-enter-active
  .hidden-panels-bar-leave-active
    transition: z-index var(--d-fast), transform var(--d-fast)
  .hidden-panels-bar-enter
    transform: translateY(-100%)
    z-index: 0
  .hidden-panels-bar-enter-to
    transform: translateY(0)
    opacity: 1
    z-index: 1000
  .hidden-panels-bar-leave
    transform: translateY(0)
    opacity: 1
    z-index: 1000
  .hidden-panels-bar-leave-to
    transform: translateY(-100%)
    z-index: 0

#root[data-nav-layout="vertical"]
  .hidden-panels-bar-enter-active
  .hidden-panels-bar-leave-active
    transition: z-index var(--d-fast), transform var(--d-fast)
  .hidden-panels-bar-enter
    transform: translateX(-100%)
    z-index: 0
  .hidden-panels-bar-enter-to
    transform: translateX(0)
    opacity: 1
    z-index: 1000
  .hidden-panels-bar-leave
    transform: translateX(0)
    opacity: 1
    z-index: 1000
  .hidden-panels-bar-leave-to
    transform: translateX(-100%)
    z-index: 0